<template>
  <div class="productCateList">
    <div class="productCateTitle">
      <div class="productCateTitleL">
        <i class="icon iconfont icon-liebiao"></i>
        分类数据列表
      </div>
      <div class="productCateTitleR">
				<el-button v-show="backFlage" type="primary" @click="shangji(listQuery.parent_id)">返回上级分类</el-button>
        <el-button @click="add" type="primary">添加</el-button>
      </div>
    </div>
    <div class="productCateBody">
      <el-table :data="product_attr" border style="width: 100%">
        <el-table-column prop="id" :label="title[0]"> </el-table-column>
        <el-table-column prop="name" :label="title[1]"> </el-table-column>
        <el-table-column label="级别">
          <template slot-scope="scope">
            {{ scope.row.level | levelStr }}
          </template>
        </el-table-column>
        <el-table-column prop="product_count" label="商品数量">
        </el-table-column>
        <el-table-column prop="product_unit" label="数量单位">
        </el-table-column>
        <el-table-column label="是否显示">
          <template slot-scope="scope">
            <el-switch
              :value ="scope.row.show_status|show_statusStr"
              active-color="#409eff"
              inactive-color="#dcdfe6"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"> </el-table-column>
        <el-table-column label="设置">
					<template slot-scope="scope">
            <div class="tableBtn">
              <el-button @click="xiaji(scope.row.id)" class="down" type="primary" :disabled="nextFlage">查看下级</el-button>
            </div>
          </template>
				</el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="tableBtn">
              <el-button @click="updata(scope.row.id)" class="updata" type="primary">编辑</el-button>
              <el-button class="delete" type="danger">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
		<div class="block">
        <el-pagination
          :current-page="listQuery.pageNum"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next"
					:page-sizes="[5,10,15,20]"
          :page-size="listQuery.pageSize"
					@size-change="handleSizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
  </div>
</template>

<script>
// import axios from "axios";
import { fetchProductCateList } from "@/api/productCate";

export default {
  name: "productCate",
  data() {
    return {
      product_attr: [],
			title:["编号","分类名称"],
			listQuery:{
				pageNum:1,
				pageSize:5,
				parent_id:0
			},
			total:0,
			nextFlage:false,
			backFlage:false,
    };
  },
  mounted() {
		this.getCateList()
  },
	methods: {
		async getCateList(){
			var res = await fetchProductCateList(this.listQuery)
			this.product_attr = res.data
			this.total = res.total
		},
		handleCurrentChange:function(val){
			this.listQuery.pageNum= val
			this.getCateList()
		},
		handleSizeChange:function(val){
			this.listQuery.pageSize = val
			this.getCateList()
		},
		xiaji:function(res){
			this.listQuery.parent_id += res
			this.nextFlage = true;
			this.backFlage = true;
			this.getCateList()
		},
		shangji:function(res){
			this.listQuery.parent_id -= res
			this.nextFlage = false;
			this.backFlage = false;
			this.getCateList()
		},
		add:function(){
			this.$router.push({name:"CateAdd"})
		},
		updata:function(cateid){
			console.log(cateid);
			this.$router.push({name:"updatcate",params:{"id":cateid}})
		}
	},
  filters: {
    levelStr: function (val) {
      if (val === 0) {
        return "一级";
      }else if(val === 1){
				return '二级'
			}
    },
		show_statusStr:function(val){
			if(val===0){
				return false;
			}else{
				return true
			}
		}
  },
};
</script>

<style>
.productCateTitle {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #ebeef5;
}

.productCateTitleR > button {
  width: 64px;
  height: 24px;
  padding: 0;
}

.productCateTitleR button:first-child{
	width: 90px;
	height: 24px;
	padding: 0;
}

.tableBtn {
  display: flex;
}

.updata,
.delete {
  width: 56px;
  height: 28px;
  padding: 0;
  color: #fff;
}

.down{
	width: 80px;
	height: 28px;
	padding: 0;
}
</style>